<template>
	<view class="custom-navbar">
		<!-- 返回按钮，可根据需要添加 -->
		<!-- <text class="uni-icon uni-icon-left"></text> -->
		
		<!-- 用户信息 -->
		<view class="custom-navbar-userinfo">
			<image class="custom-navbar-avatar" :src="userInfo.imgUrl"></image>
			<text class="custom-navbar-name">{{userInfo.name}}</text>
		</view>
		<view class="custom-navbar-delete" @click="toggleDelete('bottom',userId)">
			. . .
		</view>

		<!-- 其他可能的导航按钮 -->
	</view>
	<view>
		<view class="swiper_info">
			<view v-if="viedoUrl" class="viedo_info" > 
				<video :src="viedoUrl"></video>
			</view>
			<view v-else >
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
					<swiper-item v-for="(item,i) in images" :key="i">
						<navigator class="swiper_info_nav">
							<image :src="item" @click="preview(i)" class="swiper_info_image"></image>
						</navigator>
					</swiper-item>
				</swiper>
			</view>
			
		</view>
	</view>
	<!-- 简介 -->
	<view class="">

	</view>
	<!-- 内容 -->
	<view class="info_content">
		{{info.content}}
	</view>
	<!-- 时间 -->
	<view class="info_time">
		{{info.createTime}}
	</view>
	<!-- 评论数量 -->
	<view class="info_comment_num">
		共{{hotLength}}条评论
	</view>
	<view class="info_comment" v-for="(item, i) in comments" :key="i" >
		<!-- 头像 在左边-->
		<view class="info_comment_image">
			<image class="info_comment_imagedetail" :src="item.image||defaultPic"></image>
		</view>
		<!-- 名称 和内容放右边 -->
		<view class="info_comment_name_content" @click="toggle('bottom',item.userId,item.userName,isMyself,item.id)">
			<view class="info_comment_name">
				{{item.userName}}
			</view>
			<view class="info_comment_content">
				<view v-if="item.replyUserName" style="color: deepskyblue;">@{{item.replyUserName}}</view>
				<view>{{item.reviewContent}}</view>
			</view>
			<view class="info_comment_time" >
				{{handleDate(item.createTime) }} 回复
			</view>
		</view>

	</view>
	<view class="info_comment_down">
		没有了
	</view>
	<view class="my_comment_content">


		<uni-section class="my_comment_content_text">
			<input type="text" @click="toggle('bottom',0,'',false,0)" placeholder="说点什么吧">
		</uni-section>

		<view class="association-like" v-if="info.userLikesFlag===true" style="color:red" @click="likeOrRemoveHotspot()">
			<uni-icons type="hand-up" color='red' size="22"></uni-icons>
			{{info.hotspotsLikesNum}}
		</view>
		<view class="association-like" v-else  @click="likeOrRemoveHotspot()" >
			<uni-icons type="hand-up" size="22"></uni-icons>
			{{info.hotspotsLikesNum}} 
		</view>


		
		<view class="association-comment">
			<uni-icons type="chat" size="24"></uni-icons>
			{{info.hotspotsReviewNum}}
		</view>

	</view>
	<!-- 如果是本人，弹出层是删除和回复的选项 -->
	<view  >
		<uni-popup ref="popupDeleteMyself" background-color="#fff" @change="change" :mask-click="maskClick">
			<button @click="deleteComment()">删除</button>
			<button @click="toggle('bottom',this.objectData.thisCommentUserId,this.objectData.thisCommentUserName,false,this.objectData.commentId)">回复</button>
		</uni-popup>
		<uni-popup ref="popupDelete" background-color="#fff" @change="change" :mask-click="maskClick">
			<button @click="toggle('bottom',this.objectData.thisCommentUserId,this.objectData.thisCommentUserName,false,this.objectData.commentId)">回复</button>
		</uni-popup>
	</view>
	<view>
		<uni-popup ref="popup" background-color="#fff" @change="change" :mask-click="maskClick">
			<comment :object-prop="objectData" :show="isPopupShow" @close="closePopup" />
		</uni-popup>
	</view>
	<view>
		<uni-popup ref="popupDeleteContent" background-color="#fff" @change="change" :mask-click="maskClick">
			<button @click="deleteContent()">删除</button>
		</uni-popup>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	 import comment from '@/components/comment/comment.vue';
	 
	export default {
		components: {
		    comment
		},
		data() {
			return {
				id: 0,
				//userId: -1,
				info: Object,
				images: [],
				viedoUrl: '',
				userInfo: {
					imgUrl: this.defaultPic,
					name: '用户名称',
					createUserId: -1,
				},
				hotLength: 0,
				comments: [],
				defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
				// 组件中的传值,回复的人的名称和id
				objectData: {
					id: this.id,
					//热点id
					hotspotId: 0 ,
				    thisCommentUserId: 0,
				    thisCommentUserName: "",
					commentId: 0,
				},
				//关闭弹窗
				isPopupShow: true,
				//是否是本人
				isMyself: true,
				//蒙版是否要手控制，如果有点击删除和回复发表评论 蒙版为false
				maskClick: true,
				//点赞的id
				likeId:0,
				
			};
		},
		computed: {
		  ...mapState('m_user', ['userId'])
		},
		onLoad(options) {
			// 获取动态Id
			this.id = options.id
			//this.userId = 1
			//获取热点的数据
			this.getHostDetail(options.id)
			this.createUserId = options.createUser
			this.userInfo.imgUrl = options.imgUrl
			this.userInfo.name = options.name
			uni.setNavigationBarTitle({
				title: options.title
			})
			
		},
		methods: {
			close() {
				this.$refs.popupDelete.close()
				this.$refs.popupDeleteMyself.close()
			},
			// 返回上一页并尝试刷新
			 goBackAndRefresh() {
			  const pages = getCurrentPages(); // 获取页面栈
			  if (pages.length > 1) {
			    // 上一页实例
			    const prevPage = pages[pages.length - 2];
			    // 调用上一页的方法来刷新数据
			    prevPage.refreshData(); // 假设上一页有这个方法
			    uni.navigateBack(); // 返回上一页
			  }
			},
			//当此条评论跟当前登录的人的id一致时可以删除此条评论
			async deleteComment(){
				await uni.request({
					url: uni.$http.baseUrl + '/api/hotspot/deleteReviewHotspot',
					data: {
						id: this.objectData.commentId,
					},
					method: 'POST',
					header: {
						//"Content-Type": "application/json",
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						console.log(res)
						this.close()
						this.getHostDetail(this.id);
						return uni.$showMsg("删除成功")
						 
						
					},
					fail: (res) => {
						if (res.statusCode !== 200) return uni.$showMsg()
					}
				});
				
			},
			//当此条发布消息跟本人userId一致时，可以删除评论
			async deleteContent(){
				await uni.request({
					url: uni.$http.baseUrl + '/api/hotspot/deleteHotspot',
					data: {
						id: this.id,
					},
					method: 'POST',
					header: {
						//"Content-Type": "application/json",
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						 uni.navigateBack()
						//this.goBackAndRefresh()
						return uni.$showMsg("删除成功")
					},
					fail: (res) => {
						if (res.statusCode !== 200) return uni.$showMsg("删除失败")
					}
				});
				
			},
			closePopup() {
			      this.$refs.popup.close()
				  this.$refs.popupDelete.close()
				  this.$refs.popupDeleteMyself.close()
				  this.getHostDetail(this.id);
			},
			//获取热点动态
			async getHostDetail(id) {
				await uni.request({
					url: uni.$http.baseUrl + '/api/hotspot/getHotspotDetail',
					data: {
						id: id,
						userId: this.userId,

					},
					method: 'POST',
					header: {
						//"Content-Type": "application/json",
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						this.info = res.data.data
						this.images = res.data.data.imgUrl.split(',')
						this.viedoUrl = res.data.data.videoUrl
						this.hotLength = res.data.data.hotspotsReviewVOList.length
						this.comments = res.data.data.hotspotsReviewVOList
						console.log(this.info )
					},
					fail: (res) => {
						if (res.statusCode !== 200) return uni.$showMsg()
					}
				});
			},
			async getSwiperList(id) {
				await uni.request({
					url: uni.$http.baseUrl + '/api/activity/getActivityDetail',
					data: {
						id: id,
						userId: this.userId,

					},
					method: 'POST',
					header: {
						// "Content-Type": "application/json",
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						this.info = res.data.data
						this.images = res.data.data.activityImg.split(',')
						console.log(this.info)

					},
					fail: (res) => {
						if (res.statusCode !== 200) return uni.$showMsg()
					}
				});

			},
			// 实现轮播图的预览效果
			preview(i) {
				// 调用 uni.previewImage() 方法预览图片
				uni.previewImage({
					// 预览时，默认显示图片的索引
					current: i,
					// 所有图片 url 地址的数组
					urls: this.images.map(x => x),
				})
			},
			
			handleDate(timestamp) {
				
				const dateTimeStamp = Math.floor(new Date(timestamp.replace(/-/g, "/")).getTime());
				const minute = 1000 * 60;
				const hour = minute * 60;
				const day = hour * 24;
				let result = '';
				const now = new Date().getTime();
				const diffValue = now - dateTimeStamp;
				if (diffValue < 0) {
					// console.log("时间不对劲,服务器创建时间与当前时间不同步");
					return result = "刚刚";
				}
				const dayC = diffValue / day;
				const hourC = diffValue / hour;
				const minC = diffValue / minute;
				if (parseInt(dayC) > 30) {
					result = this.handleTimeToData(dateTimeStamp);
				} else if (parseInt(dayC) > 1) {
					if (parseInt(dayC) >= 21) {
						result = "三周前";
					} else if (parseInt(dayC) >= 14) {
						result = "两周前";
					} else if (parseInt(dayC) >= 7) {
						result = "一周前";
					} else {
						result = "" + parseInt(dayC) + "天前";
					}
				} else if (parseInt(dayC) == 1) {
					result = "昨天";
				} else if (hourC >= 1) {
					result = "" + parseInt(hourC) + "小时前";
				} else if (minC >= 5) {
					result = "" + parseInt(minC) + "分钟前";
				} else
					result = "刚刚";
				return result;
			},
			handleTimeToData(dateTimeStamp) {
				const dateObj = new Date(dateTimeStamp); // 将时间戳转换成日期对象			
				const year = dateObj.getFullYear(); // 获取年份
				const month = (dateObj.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，并补零
				const day = dateObj.getDate().toString().padStart(2, '0'); // 获取日期，并补零
				const hours = dateObj.getHours().toString().padStart(2, '0'); // 获取小时，并补零
				const minutes = dateObj.getMinutes().toString().padStart(2, '0'); // 获取分钟，并补零
				const seconds = dateObj.getSeconds().toString().padStart(2, '0'); // 获取秒数，并补零
				const formattedDate = `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`; // 拼接成指定格式的时间字符串	
				return formattedDate;
			},
			//底部
			toggle(type,userId,userName,ismyself,commentId) {
				this.type = type
				if(ismyself){
					if(userId==this.userId){
						this.$refs.popupDeleteMyself.open(type)
					}else{
						this.$refs.popupDelete.open(type)
					}
					
				}else{
					// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
					this.$refs.popup.open(type)
				}
				//评论的id
				this.objectData.commentId=commentId
				this.objectData.thisCommentUserId=userId
				this.objectData.thisCommentUserName=userName
				this.objectData.hotspotId=this.info.id
				this.objectData.id=this.id
				this.objectData.userId=this.userId
				this.popupValue=true
				
			},
			toggleDelete(type,userId){
				if(userId==this.userId){
					this.$refs.popupDeleteContent.open(type)
				}
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			likeOrRemoveHotspot(){
				if(this.info.userLikesFlag==null||this.info.userLikesFlag==false){
					this.likeHotspot()
				}else{
					this.cancelLikeHotspot()
				}
			},
			//点赞校园热点
			async likeHotspot(){
				await uni.request({
					url: uni.$http.baseUrl+'/api/hotspot/likeHotspot', 
					data: {
						// 页码值
						userId: this.userId,
						hotspotId: this.info.id,
					},
					method: 'POST',
					header: {
						   "Content-Type": "application/json",
						 // "Content-Type": "application/x-www-form-urlencoded"
						},
					success: (res) => {
						// ** 关闭节流阀
						//如果点赞成功了,就给这个评论放true
						this.info.userLikesFlag=true
						this.info.hotspotsLikesNum+=1
						//点赞的id
						this.likeId=res.data
					},
					fail: (res) =>{
						if (res.statusCode !== 200) return uni.$showMsg()
					}
				});
			},
			//取消校园热点
			async cancelLikeHotspot(){
				if(this.info.userLikesId!=null){
					this.likeId=this.info.userLikesId
				}
				await uni.request({
					url: uni.$http.baseUrl+'/api/hotspot/cancelLikeHotspot', 
					data: {
						// 点赞Id
						id: this.info.userLikesId,
					},
					method: 'POST',
					header: {
						  //  "Content-Type": "application/json",
						 "Content-Type": "application/x-www-form-urlencoded"
						},
					success: (res) => {
						// ** 关闭节流阀
						//如果点赞成功了,就给这个评论放true
						this.info.userLikesFlag=false
						this.info.hotspotsLikesNum-=1
					},
					fail: (res) =>{
						if (res.statusCode !== 200) return uni.$showMsg()
					}
				});
			},
			
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: white;
	}
	.viedo_info{
		height: 650rpx;
		video{
			width: 100%;
			height: 100%;
		}
	}
	
	swiper {
		height: 550rpx;

		.swiper_info_nav,
		.swiper_info_image {
			width: 100%;
			height: 100%;
		}
	}

	/* 自定义导航条样式 */
	.custom-navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.custom-navbar-userinfo {
		display: flex;
		align-items: center;
		margin-left: 10px;
	}

	.custom-navbar-avatar {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-right: 5px;
	}

	.custom-navbar-name {
		font-size: 14px;
		color: #333;
	}

	.info_content {
		margin: 10px;
	}

	.info_time {

		margin: 10px;
		padding-bottom: 20px;
		font-size: 12px;
		font-weight: 250px;
		color: #b4b4b4;
		border-bottom: solid 1px #efefef;
	}

	.info_comment_num {
		margin: 10px;
	}

	.info_comment {
		margin-top: 10px;
		margin-left: 10px;
		display: flex;
		flex-direction: row;
		border-bottom: solid 1px #efefef;

		.info_comment_image {
			.info_comment_imagedetail {
				width: 30px;
				/* 宽度应该和高度相同 */
				height: 30px;
				border-radius: 50%;
				/* 圆形效果 */
			}
		}

		.info_comment_name_content {
			padding-left: 20px;
			display: flex;
			flex-direction: column;
			width: 100%;

			.info_comment_name,
			.info_comment_time {
				font-size: 12px;
				font-weight: 250px;
				color: #b4b4b4;
				padding-bottom: 5px;
			}

			.info_comment_content {
				display: flex;
			}

		}

	}

	.info_comment_down {
		height: 50px;
		align-items: center;
		font-size: 12px;
		font-weight: 250px;
		color: #b4b4b4;
		padding-top: 1%;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		// padding: 50px 60px ;
	}

	.my_comment_content {
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 40px;
		//box-sizing: border-box; /* 防止padding影响宽度 */
		display: flex;

		.my_comment_content_text {
			padding-left: 20px;
			padding-bottom: 20px;
			input {
				width: 120%;
				border: 1px solid #ccc;
				/* 边框颜色和宽度 */
				border-radius: 15px;
				/* 圆角的半径 */
				padding: 5px 10px;
				/* 内边距 */
				outline: none;
				/* 去除点击输入框时浏览器默认的轮廓线 */
			}
		}

		.association-like {
			margin-top: 5px;
			margin-left: auto;
			//margin-right: 10px;
		}

		.association-comment {
			margin-top: 5px;
			margin-right: 10px;
			margin-left: 12px;
		}
	}

	
	.emotions-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		border-top: #ccc;
		background-color: #f6f6f6;
		image {
			margin: 5px;
			width: 20px;
			height: 20px;
			cursor: pointer;
		}
	}
</style>